<template>
  <div class="s-canvas">
    <canvas id="s-canvas" :width="contentWidth" :height="contentHeight" @click="emit('click')" />
  </div>
</template>
<script setup lang="ts">
import type { PropType } from 'vue'
import useMecurity from './useMecurity'
const props = defineProps({
  identifyCode: {
    type: String as PropType<string>,
    default: '1234',
  },
  fontSizeMin: {
    type: Number as PropType<number>,
    default: 16,
  },
  fontSizeMax: {
    type: Number as PropType<number>,
    default: 40,
  },
  backgroundColorMin: {
    type: Number as PropType<number>,
    default: 180,
  },
  backgroundColorMax: {
    type: Number as PropType<number>,
    default: 240,
  },
  colorMin: {
    type: Number as PropType<number>,
    default: 50,
  },
  colorMax: {
    type: Number as PropType<number>,
    default: 10,
  },
  lineColorMin: {
    type: Number as PropType<number>,
    default: 40,
  },
  lineColorMax: {
    type: Number as PropType<number>,
    default: 180,
  },
  contentWidth: {
    type: Number as PropType<number>,
    default: 112,
  },
  contentHeight: {
    type: Number as PropType<number>,
    default: 38,
  },
})
const emit = defineEmits(['click'])
const { drawPic } = useMecurity(props)

watch(
  () => props.identifyCode,
  () => drawPic()
)

onMounted(() => {
  drawPic()
})
</script>
<style lang="less" scoped></style>
